<template>
    <div style="background-color:#f4f4f4;height:100%">
        <div class="head">
     <router-link :to="link"><img src="@/assets/imgs/loginLogo.png" alt=""></router-link>
     <div class="login"><router-link :to="link">{{user}}</router-link></div>


     </div>
     

<ul class="nav">
   <li>
       <img src="@/assets/imgs/movieorder.png" alt="">
       <p>电影订单</p>
   </li>
   <li>
        <img src="@/assets/imgs/productOrder.png" alt="">
        <p>商品订单</p>

   </li>
    </ul>

    <div class="list">
        <img src="" alt="">
        <p>卖座劵</p>
        <img src="" alt="">
    </div>
        <div class="list">
        <img src="" alt="">
        <p>组合红包</p>
        <img src="" alt="">
    </div>
    <div class="list">
        <img src="" alt="">
        <p>余额</p>
        <img src="" alt="">
    </div>
        <div class="list">
            <img src="" alt="">
        <p><router-link :to="setLink">设置</router-link></p>
        <img src="" alt="">
    </div>


    </div>
</template>

<script>
export default {
    data(){
            return{
                userTel:'',
                link:'/login',
                user:'用户登录',
                setLink:'/settings'
        }
    },
    methods:{
        changeLink(){
            if(this.$store.state.status){
                  this.link='/user'
              }

        },
        res(){
            if(this.$store.state.status){
                this.user=this.$store.state.status.tel
                this.setLink='/settings'
            }else{
                this.user='用户登录'
                this.setLink='/login'
            }
        }

    },
    created(){
        console.log(1111111)
        this.changeLink()
        this.res()
    }
}
</script>

<style lang="scss" scoped>
.head{
    height:4rem;
    padding:1.28rem 0 0 0.44rem;
    background-color:#ff8526;
    box-sizing: border-box;
    margin:-0.88rem 0 0;
    display: flex;
    align-items: center;
    img{
        height:1.34rem;
        width:1.34rem;
        margin:0 0.4rem 0 0;
        float:left;
    }
    .login{
        float:left;
        font-size:0.32rem;
        a{
        color:white;

        }
    }

}

   .nav{
      height:1.58rem;
      margin-bottom:0.2rem;
      background-color: white;
        display: flex;
    align-items: center;

      li{
          float:left;
          width:3.75rem;
          height:0.98rem;
          text-align: center;
          color: #797d82;
          font-size:0.2rem;
      }
    }


    .list{
     height:0.98rem;
     padding:0 0.3rem;
     background-color: white;
         display: flex;
    align-items: center;
             border-bottom: 0.01rem solid #f4f4f4;

    :nth-child(1){
        height:0.4rem;
        width:0.4rem;
    }
    :nth-child(3){
        width:0.12rem;
        height:0.2rem;
    }
     img{
         float:left;
     }
     p{
         float:left;
         font-size:0.3rem;
         width:6.08rem;
         margin-left:0.3rem;
         a{
             color:black;
         }
     }
    }

</style>